輕鬆的前言看完了，今天我們就來正式進入D3的世界吧！
本篇大綱：
基礎介紹與運作原理、使用目的/優缺點、版本變化、酷炫D3網站、推薦閱讀與參考資源（含官方文件）
D3.js 是由 Mike Bostock 開發的一套 JS 函式庫，能用來操作 Document Object Model (DOM) 樹狀資料，將資料內容視覺化的工具。D3.js 全名是 Data-Driven Documents (資料驅動文件)，這三個 D 也是 D3 的由來～而從它的英文名字就知道，這個函式庫跟數據資料（data）關係一定很緊密！
D3.js 很常被用在建立圖表，但它和 Canvas 的運作方式完全不同。它是操作 DOM 樹的 JS 函式庫，因此基本的建構元素不是圓或矩形等圖案，而是用以下方的方式：
D3 主要是搭配 SVG 去建立圖表，但它並不只限於操作 SVG，而是能操作頁面上所有的 DOM 元素。對於沒有使用過D3.js的人來說，只看上段敘述可能有點難懂，但如果提到另外一套一樣是操作 DOM 樹的 JS 函示庫 — JQuery，應該就比較好理解了。JQ 跟 D3 一樣都是操作 DOM 元素，因此有很多地方相似，而且 D3 的選擇器跟 JQ 一樣都是使用 CSS Selector。如果現在還不太清楚也沒關係，等 Day4 講解到 D3 selection 就會懂了~
看完了D3的基本介紹與運作原理後，能得知在學 D3.js 之前，還需要對以下這些網頁技術有基本的掌握：
雖然 D3已經把上述的技術變得很容易使用，但使用者還是需要對這些網頁技術有一定的了解與掌握（尤其是SVG）。這也是為什麼蠻多新手覺得D3的門檻很高、學習困難。如果你的網站並不需要非常酷炫、客製化的圖表，其實還有很多更好上手的函式庫可以選擇，下面會再跟大家介紹我自己用過的兩套簡單方便圖形函式庫。
接下來我們來看看 D3 的特色跟它的優缺點吧！我覺得D3的特色有以下幾點：
html、JS、data 的技術來建構圖表能替換成其他套件：canvas、Tree.js、Pixi.js許多 API (總共有三十種分類)，這些 API 能協助進行資料處理、畫面顯示計算
一套工具總是有它的優點，才會讓人願意使用嘛~所以我們現在來講講 D3.js 的優點吧！
自由度高，能建立各式互動圖表製作更精確的使用者互動
但除了優點之外，D3 也有幾項出名的缺點
學習門檻高
由於畫面是使用SVG渲染，但大量的 SVG 會造成 DOM 渲染的效能瓶頸 (太多 DOM元素 在畫面上)。
＊解決方式是將畫面渲染改成 Canvas 等其他方式呈現。目前許多圖表套件也已經改用Canvas處理，就是想跳過效能問題
版本迭代快，新版的資源少（特別是中文）。所以很常查找資料時，按照別人寫的code卻跑不動，最後一查才發現是版本不同。
幾乎每個講解D3的人，都會提到D3的版本變化。因為它的 第3版 (v3) 跟 第4版 (v4) 差異巨大，很多底層撰寫的方式都改掉了。因此直接把第三版的程式碼拿來用的話，你連圖片都看不到，眼前只有一片空白。
但是！偏偏 v3 是最多人分享教學、範例程式碼、酷炫圖表使用的版本，因此現在網路上一查還是很多程式碼都是用 v3 寫的。如果傻傻想直接套用網路上查到的程式碼，很可能根本跑不動。而且目前D3已經出到第七版(v7)了，但很多中文的教學資源卻停留在v5，因此我這次會使用 v7 版本來講解，希望能造福更多D3苦手。
上面講到學習D3的缺點，以及有更多能替代D3函式庫，我們就先來談談想學 D3 的人通常有哪些原因吧！
我覺得會想學習並使用D3.js的人，不外乎就這兩個原因：
但如果你並沒有這兩種需求，只是想做出簡單、清晰呈現數據的圖表，這樣的話就能考慮使用
它們兩個比 D3.js 好上手太多了，能用很容易的方式製作出圖表~ C3.js 更是基於 D3 去簡化的工具 (作者覺得 D3太難了，想弄得簡單點)。其實好用又簡單的函式庫還很多，我這邊只是列出我用過覺得簡單、方便、好上手的工具。如果沒有客製化需求的人推薦使用~
但畢竟這系列是講解 D3.js！所以話又說回來，雖然 D3 的確有點難學，不過一旦了解它原理後，會發現它真的是功能強大的工具。而且畫出超炫圖表的時候，成就感直接爆棚！為了吸引大家願意接著看完這系列，我們就先來看看 D3能做出哪些酷炫的東東吧！
D3 不只是能製作酷炫的圖表，還能做出整個酷炫的網頁。以下這些是我覺得酷炫、互動性佳、又能清晰傳達想說資訊的網站：
womenwill (性別平等議題，Awwwards 上得獎的D3網站)
這個是我最喜歡的網站，它的整個背景都用不同顏色的點點組成，巧妙運用動態與顏色傳達議題。而且點點還會與滑鼠互動，讓人覺得有趣又新奇
smartcities (城市探索，Awwwards 上得獎的D3網站)
網站運用卷軸滾動逐步秀出圖表，滑鼠 hover 過去時還能凸顯所在的位置，非常有趣
investmentcalculator (生涯理財，Awwwards 上得獎的D3網站)
用數據看台灣
我個人非常喜歡的網站。它是運用台灣政府的公開資料，以圖表的方式展現目前國家的各種現狀。前陣子限電、缺水時，這裡的「台灣即時用電圖表」、「水庫即時水情圖表」也在社群火紅了一陣子。我覺得這個才是使用圖表的真諦，能清楚地將複雜、普通凡人不會去看、但卻又跟我們生活息息相關的數據，用圖表簡單的呈現給大家。
看完上面使用 D3 做出的酷網站、炫圖表後，有沒有手癢難耐，想趕快了解 D3 呀？如果等不及這系列的更新，想自己去查找資料；或是想再更深入了解 D3 的話，這邊也推薦各種我覺得很棒的資源給大家～
文章教學
D3官方API文件、D3 Observal 部落格雖然我一開始學D3時，覺得官方文件實在是難看得要死，實在是無法從這個文件看懂怎麼寫D3。但我後來發現，由於 D3的版本變化實在太快了，網路文章教學使用的程式碼常常無法直接套用 (而且很多都是參數等小細節改了)，所以最後還是得回歸到官方文件查要用的API，以及它的相關細節設定。查完後確定用法，再搭配文章的程式碼去調整，這樣才能順利畫出圖表。所以我在這邊還是介紹 D3官方文件，之後的教學也會在必要時候教大家如何看文件。
Kuro D3教學PDF (v5)
Tutorial Teacher (英文，v4)
影片教學
範例程式碼
最後，這邊一樣附上我在這系列文章的程式碼與圖表Github 、 Github Page，需要的人請自行取用～
iThome鐵人賽
看影片追技術